<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
            <header>
             <Row>
                 <span>渠道大类:</span>
                <Select style="width:150px" placeholder="渠道大类" v-model="listQueryCondition.patternCode" @on-change="patternChange">
                    <Option v-for="item in patternList" :value="item.patternCode" :key="item.patternCode">{{ item.patternName }}</Option>
                </Select>
                 <span style="width: 150px;margin-left: 25px;">渠道:</span>
                <Select v-model="listQueryCondition.channelType" style="width:150px" placeholder="渠道">
                    <Option v-for="item in channelList" :value=" item.channelCode" :key=" item.channelCode">{{ item.channelName}}</Option>
                </Select>
                 <span style="width: 150px;margin-left: 25px;">资金方:</span>
                <Select v-model="listQueryCondition.fundSourceCode" style="width:150px" placeholder="资金方">
                    <Option v-for="item in fundList" :value="item.fundCode" :key="item.fundCode">{{ item.fundName}}</Option>
                </Select>
                <span style="width: 150px;margin-left: 25px;">身份证:</span>
                 <Input v-model="listQueryCondition.custIdNumber" placeholder="身份证" style="width: 150px" />
                  <span style="width: 150px;margin-left: 25px;">姓名:</span>
                  <Input v-model="listQueryCondition.custName" placeholder="姓名" style="width: 150px" />
                  <span style="width: 150px;margin-left: 25px;">产品:</span>
                  <Select v-model="listQueryCondition.productCode" style="width:180px" placeholder="产品">
                    <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{item.productTypeName }}</Option>
                </Select>
               </Row>
               <Row style="margin-top: 20px">
                  <span>申请日期(起):</span>
                    <DatePicker type="date" placeholder="申请日期(起)" v-model="listQueryCondition.applyBeginDate" id="applyBeginDate" style="width: 150px" value="yyyy-MM-dd"></DatePicker>
                  <span>-</span>
                 <span>申请日期(止):</span>
                   <DatePicker type="date" placeholder="申请日期(止)" v-model="listQueryCondition.applyEndDate" id="applyEndDate" style="width: 160px" value="yyyy-MM-dd"></DatePicker>
                  <Button type="primary" @click="listQuery" style="margin-left: 15px;">查询</Button>
               </Row>
            </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle">
                <Table border ref="selection" :columns="listInfoColumns" :data="listInfoData" style="width: 100%;" @on-selection-change="handleRowChange"></Table>
            </Row>
            <div style="margin-top: 36px;text-align: center;">
                <Upload ref="upload" :on-success="uploadSuccess" :on-error="uploadFail" :on-progress="uploalDealing" :loading="loadingStatus" type="drag" :action="uploadUrl" :show-upload-list="false" name="file">
                    <Button type="primary">批量导入</Button>
                </Upload>

                <Button type="primary" style="margin-left: -525px;" @click="loanApplyOperation">操作放款</Button>
            </div>
            <div style="margin-top: 36px;text-align: center;">
                <Page :total="listQueryCondition.total" :current="listQueryCondition.pageNum" :page-size="listQueryCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
        <Modal v-model="modal1" title="温馨提示" okText="确认操作" cancelText="重新选择" :scrollable="true" @on-ok="ok" @on-cancel="cancel">
            <div style="height: 350px; overflow: auto;">
                <Table border :columns="innerListInfoColumns" :data="innerListInfoData"></Table>
            </div>
        </Modal>

        <Modal v-model="modal2" title="温馨提示" okText="确认操作" cancelText="重新选择" :scrollable="true" @on-ok="ok2" @on-cancel="cancel">
            <div style="text-align: center;">
                本次成功导入放款申请:{{uploadSuccessData.successCount}}个客户,合计:{{uploadSuccessData.sumAct}}元
            </div>
            <div style="text-align: center;height: 500px;  overflow: auto;">
                导入失败的数据如下：
                <div>
                    <Table border :columns="uploadFailColumn" :data="uploadFailData" style="width: 100%;"></Table>
                </div>
            </div>
        </Modal>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      uploadUrl: this.$appContext.marvels_core_approve + 'approve/loanApplication/service/applyLoanUpload',
      loanIds: '',
      i: 0,
      j: 0,
      loadingStatus: false,
      file: null,
      modal1: false,
      modal2: false,
      listQueryCondition: {
        loanId: '',
        productCode: '',
        channelType: '',
        fundSourceCode: '',
        paymentStatus: '',
        custName: '',
        custIdNumber: '',
        applyBeginDate: '',
        applyEndDate: '',
        faceSignBeginDate: '',
        faceSignEndDate: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      innerDataInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      channelList: [],
      patternList: [],
      fundList: [],
      paymentStatusList: [],
      listInfoColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'custIdNumber'
        },
        {
          title: '贷款金额',
          key: 'loanAmount',
          align: 'center'
        },
        {
          title: '贷款期限',
          key: 'loanTerm',
          align: 'center'
        },
        {
          title: '产品',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'applyDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applyDate))
            ])
          }
        },
        {
          title: '面签通过时间',
          key: 'faceSignDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.faceSignDate))
            ])
          }
        },
        {
          title: '渠道',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundSourceName',
          align: 'center'
        }
      ],
      listInfoData: [],

      innerListInfoColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'custIdNumber'
        },
        {
          title: '放款金额',
          key: 'loanAmount',
          align: 'center'
        },
        {
          title: '期限',
          key: 'loanTerm',
          align: 'center'
        },
        {
          title: '资金源',
          key: 'fundSourceName',
          align: 'center'
        }
      ],
      innerListInfoData: [],
      uploadSuccessData: {
        sumAct: '',
        successCount: '',
        loanIds: ''
      },
      uploadFailColumn: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'custIdNumber'
        },
        {
          title: '放款金额',
          key: 'applyAmount',
          align: 'center'
        },
        {
          title: '贷款期限',
          key: 'terms',
          align: 'center'
        }
      ],
      uploadFailData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.screenConditon()
  },

  methods: {
    // 查询
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanApplication/service/listQuery', this.listQueryCondition).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.listInfoData = data.data.list
        vm.listQueryCondition.total = data.data.total
      }).catch(er => {

      })
    },
    // 返回选择的选择器
    handleRowChange (selection) {
      this.loanIds = ''
      this.i = 0
      for (; this.i < selection.length; this.i = this.i + 1) {
        this.loanIds = selection[this.i].loanId + ',' + this.loanIds
      }
      this.innerListInfoData = selection
    },
    // 筛选条件展示
    screenConditon () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/listScreenCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }

        vm.patternList.push({ patternCode: '', patternName: '请选择' })
        for (var patternLength = 0; patternLength < data.data.channelList.patternList.length; patternLength++) {
          vm.patternList.push(data.data.channelList.patternList[patternLength])
        }
        vm.fundList.push({ fundCode: '', fundName: '请选择' })
        var fundLength = 0
        for (; fundLength < data.data.fundList.length; fundLength++) {
          vm.fundList.push(data.data.fundList[fundLength])
        }
        vm.productList.push({ productType: '', productTypeName: '请选择' })
        var productLength = 0
        for (; productLength < data.data.productList.length; productLength++) {
          vm.productList.push(data.data.productList[productLength])
        }
      }).catch(er => {

      })
    },

    // 确认放款
    ok () {
      this.confirmLoan()
    },

    ok2 () {
      // 下载
      if (this.uploadSuccessData.loanIds === '') {
        this.$Message.warning('无导入成功的数据')
      }
      this.confirmLoan2()
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },

    loanApplyOperation () {
      if (this.loanIds === '') {
        this.$Message.info('至少选择一项进行操作')
        return
      }
      this.modal1 = true
    },
    // 确认放款
    confirmLoan () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanApplication/service/loanOperation', this.loanIds).then(re => {
        var data = re.data
        var message = data.message
        // 成功之后刷新列表
        vm.listQuery()
        this.$Message.warning(message)
        this.modal1 = false
      }).catch(er => {

      })
    },
    // 批量导入的确认放款
    confirmLoan2 () {
      var vm = this
      // console.info(this.uploadSuccessData.loanIds)
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanApplication/service/loanOperation', this.uploadSuccessData.loanIds).then(re => {
        var data = re.data
        var message = data.message
        // 成功之后刷新列表
        vm.listQuery()
        this.$Message.warning(message)
        this.modal1 = false
      }).catch(er => {

      })
    },
    uploadSuccess (response) {
      this.loadingStatus = false
      var code = response.code
      var message = response.message
      if (code !== 'success') {
        this.$Message.warning(message)
        return
      }
      this.modal2 = true
      this.uploadSuccessData.sumAct = response.data.sumAct
      this.uploadSuccessData.successCount = response.data.successCount
      this.uploadSuccessData.loanIds = response.data.loanIds
      this.uploadFailData = response.data.failData
    },
    uploadFail (error) {
      this.loadingStatus = false
      this.$Message.warning(error.message)
    },
    uploalDealing () {
      this.loadingStatus = true
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.listQueryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.listQueryCondition.pageSize = pageLength
      vm.listQuery()
    },
    patternChange (value) {
      var vm = this
      vm.j = 0
      for (vm.j; vm.j < vm.patternList.length; vm.j++) {
        if (vm.patternList[vm.j].patternCode === value) {
          vm.channelList = vm.patternList[vm.j].patternList
        }
      }
    }
  }
}
</script>

<style>
.popup-div {
  margin: 18px;
  width: 300px;
  margin-left: 100px;
}

.top-div {
  margin-top: 10px;
}

.left-div {
  width: 150px;
  float: left;
}

.common-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.i-icon {
  float: left;
  margin-left: 20px;
}

.font-div {
  float: left;
  margin-left: -73px;
  text-align: center;
}

.ivu-upload {
  float: left;
  margin-left: 38%;
}
</style>
